/**
 * Created by wei on 17/10/25.
 */
import React, { Component } from 'react';
import "../main.css";
import axios from 'axios';
import PropTypes from 'prop-types';
import PageComponent from '../front/pageInfo.js';
import RegisterForm from '../front/register.js';
import Articles from "./zarticle";
import cookie from '../cookie.js';
import Pager from '../common/pager';

class ArtCons extends Component{

    constructor(props){
        super(props);
        this.state = {
            dataSource: void(0),
            token: cookie.getCookie('token'),
            pageInfo: {
                pageNumber:0,
                pageSize:20,
                totalPages:0,
                totalElements:0,
                last:void(0),
                first:void(0),
                size:0,

            },
            register_visible: false,

        }

        this.fnRegister = this.fnRegister.bind(this);
        this.fnRegisterHideDiv = this.fnRegisterHideDiv.bind(this);

    }


    componentDidMount(){
        const {url} = this.props;
        this.refresh(url, this.state.pageInfo);
    }

    componentWillReceiveProps(nextProps){
        const {url} = nextProps;
        const {url2} = this.props;
        if(url != url2){
            this.refresh(url, this.state.pageInfo);
        }
    }


    fnPageLoad(pageInfo){
        const {url} = this.props;
        this.refresh(url, pageInfo);
    }

    fnPageLoad2(num){
        this.state.pageInfo.pageNumber = num;
        this.fnPageLoad(this.state.pageInfo);
    }

    fnRegisterHideDiv(){
        this.setState({
            register_visible: false,
        });
    }

    fnRegister(){
        this.setState({
            register_visible: true,
        });
    }

    refresh(url, pageInfo){
        // pageInfo.token = this.state.token;
        axios.post(url , pageInfo, {headers: { token: this.state.token }
        })
            .then((res) => {
                if(res.status == 200){
                    var pageInfo = {};
                    var dataSource = res.data.content;
                    pageInfo.totalPages = res.data.totalPages;
                    pageInfo.totalElements = res.data.totalElements;
                    pageInfo.last = res.data.last;
                    pageInfo.first = res.data.first;
                    pageInfo.size = res.data.size;
                    pageInfo.pageSize = res.data.size;
                    pageInfo.pageNumber = res.data.number;
                    this.setState({
                        dataSource: dataSource,
                        pageInfo: pageInfo,
                    });
                }
            });
    }

    render(){

        let articles;
        let art1 = [], art2 = [];

        var that = this;
        if(this.state.dataSource){
            articles = this.state.dataSource.map(function (v, i, arr) {
                return (
                    <Articles fnRegister={that.fnRegister.bind(this)} topic={v} replays={v.replays} userInfo={v.user} commentCounts={10}/>
                );
            });
        }
        return (
            <div style={{width:'100%',overflow:'hidden'}}>
                <RegisterForm visible={this.state.register_visible} fnHideDiv={this.fnRegisterHideDiv.bind(this)}/>
                <div className="pageBg">
                    <PageComponent fnCallback={this.fnPageLoad.bind(this)} pageInfo={this.state.pageInfo} />
                </div>
                <div className="bg">
                    {articles}
                    <div style={{width:'65%', margin:'0 auto'}}>
                        <Pager pageInfo={this.state.pageInfo} pageChange={this.fnPageLoad2.bind(this)} />
                    </div>
                </div>
            </div>
        );
    }

}

ArtCons.propTypes = {
    url: PropTypes.string.isRequired,
    // topic: PropTypes.object.isRequired,
    // replays: PropTypes.array.isRequired,
    // userInfo: PropTypes.object.isRequired,
    // commentCounts: PropTypes.number.isRequired,
};

export default ArtCons;